{% extends "base.html" %}

{% block title %}Your Cart - ShopEasy{% endblock %}

{% block content %}
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">Your Shopping Cart</h2>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">
            Review and manage items in your cart before checkout.
        </p>
    </div>
    
    {% if not cart_items %}
    <div class="px-4 py-12 text-center">
        <i class="fa fa-shopping-cart text-5xl text-gray-300 mb-4"></i>
        <h3 class="text-lg font-medium text-gray-900">Your cart is empty</h3>
        <p class="mt-1 text-sm text-gray-500">
            Looks like you haven't added any items to your cart yet.
        </p>
        <div class="mt-6">
            <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Browse Products
            </a>
        </div>
    </div>
    {% else %}
    <div class="border-t border-gray-200">
        <ul class="divide-y divide-gray-200">
            {% for item in cart_items %}
            <li class="px-4 py-6 sm:px-6">
                <div class="flex items-center">
                    <div class="h-16 w-16 flex-shrink-0">
                        <img class="h-16 w-16 object-cover" src="{{ item.product.image_url }}" alt="{{ item.product.name }}">
                    </div>
                    <div class="ml-4 flex-1 flex flex-col">
                        <div>
                            <div class="flex justify-between text-base font-medium text-gray-900">
                                <h3>
                                    <a href="/product/{{ item.product.id }}">{{ item.product.name }}</a>
                                </h3>
                                <p class="ml-4">${{ "%.2f"|format(item.product.price) }}</p>
                            </div>
                            <p class="mt-1 text-sm text-gray-500">{{ item.product.description|truncate(50) }}</p>
                        </div>
                        <div class="flex-1 flex items-end justify-between text-sm">
                            <div class="text-gray-500">
                                <form action="/cart/update/{{ item.id }}" method="post" class="inline-flex items-center">
                                    <label for="quantity-{{ item.id }}" class="mr-2">Qty:</label>
                                    <input type="number" id="quantity-{{ item.id }}" name="quantity" 
                                           value="{{ item.quantity }}" min="1" max="{{ item.product.stock }}"
                                           class="w-16 border-gray-300 rounded-md shadow-sm text-center">
                                    <button type="submit" class="ml-2 text-indigo-600 hover:text-indigo-500">
                                        Update
                                    </button>
                                </form>
                            </div>
                            <div class="flex items-center">
                                <form action="/cart/remove/{{ item.id }}" method="post">
                                    <button type="submit" class="text-red-600 hover:text-red-500">
                                        Remove
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="border-t border-gray-200 px-4 py-6 sm:px-6">
        <div class="flex justify-between text-base font-medium text-gray-900">
            <p>Subtotal</p>
            <p>${{ "%.2f"|format(total) }}</p>
        </div>
        <p class="mt-0.5 text-sm text-gray-500">
            Shipping and taxes calculated at checkout.
        </p>
        <div class="mt-6">
            <form action="/checkout" method="post">
                <button type="submit" class="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 w-full">
                    Checkout
                </button>
            </form>
        </div>
        <div class="mt-6 flex justify-center text-sm text-center text-gray-500">
            <p>
                or <a href="/" class="font-medium text-indigo-600 hover:text-indigo-500">
                    Continue Shopping<span aria-hidden="true"> &rarr;</span>
                </a>
            </p>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}
